<template>
  <!-- 注册页面 -->
  <div class="common-layout bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen flex flex-col">
    <el-container class="flex-grow">
      <el-header class="flex items-center justify-center p-4 bg-white shadow-md relative overflow-hidden">
        <!-- 装饰元素 -->
        <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 -z-10"></div>
        <div class="text-center">
          <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">用户注册</h1>
        </div>
      </el-header>
      
      <el-main class="flex items-center justify-center p-4 md:p-8">
        <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-6 md:p-8 transform transition-all duration-500 hover:shadow-2xl">
          <el-form
            ref="registerFormRef"
            :model="registerForm"
            status-icon
            :rules="rules"
            label-width="auto"
            class="register-form space-y-6"
          >
            <!-- 用户名输入框 -->
            <el-form-item label="用户名" prop="username" class="form-item-transition">
              <template #label>
                <span class="text-gray-700 font-medium">用户名</span>
              </template>
              <el-input 
                v-model="registerForm.username" 
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-300"
                placeholder="请输入用户名"
              />
            </el-form-item>
            
            <!-- 手机号输入框 -->
            <el-form-item label="手机号" prop="phone" class="form-item-transition">
              <template #label>
                <span class="text-gray-700 font-medium">手机号</span>
              </template>
              <el-input 
                v-model.number="registerForm.phone" 
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-300"
                placeholder="请输入手机号"
              />
            </el-form-item>
            
            <!-- 密码输入框 -->
            <el-form-item label="密码" prop="password" class="form-item-transition">
              <template #label>
                <span class="text-gray-700 font-medium">密码</span>
              </template>
              <el-input 
                v-model="registerForm.password" 
                type="password" 
                autocomplete="off"
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-300"
                placeholder="请输入密码"
              />
            </el-form-item>
            
            <!-- 确认密码输入框 -->
            <el-form-item label="确认密码" prop="checkPass" class="form-item-transition">
              <template #label>
                <span class="text-gray-700 font-medium">确认密码</span>
              </template>
              <el-input 
                v-model="registerForm.checkPass" 
                type="password" 
                autocomplete="off"
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-300"
                placeholder="请再次输入密码"
              />
            </el-form-item>
            
            <!-- 按钮区域 -->
            <el-form-item class="mt-8">
              <div class="flex flex-col sm:flex-row gap-4">
                <el-button 
                  type="primary" 
                  @click="handleRegister"
                  class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                >
                  注册用户
                </el-button>
                <el-button 
                  @click="handleReset"
                  class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2"
                >
                  重置
                </el-button>
              </div>
            </el-form-item>
            
            <!-- 已有账号提示 -->
            <div class="text-center text-gray-500 text-sm">
              已有账号? <router-link to="/login" class="text-blue-600 hover:text-blue-700 transition-colors duration-300 font-medium">立即登录</router-link>
            </div>
          </el-form>
        </div>
      </el-main>
      
      <el-footer class="bg-gray-50 text-center py-6 text-gray-500 text-sm">
        <Footer/>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
//导入我们自定义的register.js文件
import { register } from '@/api/register.js'
//导入element-plus的提示框
import { ElMessage } from 'element-plus'
//导入路由跳转
import { useRouter } from 'vue-router'

//获取注册表单对像
const registerFormRef = ref(null);
//定义一个路由器对象
const router = useRouter()
//
const registerForm = ref({
  username: '',
  phone: '',
  password: '',
  checkPass: ''
});

/****
 * 二次密码检验
 */
const validateCheckPass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== registerForm.value.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
}

const rules = ref({
  username: [
    { required: true, message: '用户名是必填项', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '手机号是必填项', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码是必填项', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  checkPass: [
    {validator: validateCheckPass, trigger: 'blur'}
  ]
})

const handleRegister = () => {
  // 表单验证
  registerFormRef.value.validate((valid) => {
    if (valid) {
      console.log('注册信息:', registerForm.value)
      // 1. 把注册表单中的数据通过请求发送到后端服务器
      register(registerForm.value).then(res => {
        console.log("服务端响应的数据：", res.data)
        if(res.data.code == 200) {
          //1.弹出消息提示框：注册成功
          ElMessage({
            message: res.data.data,
            type: 'success',
          })
          // 2. 重定向到登录页面
          router.push('/login')
        } else {
          //
          ElMessage.error(res.data.message)
        }
        
      }).catch(err => {
        //1.弹出消息提示框：注册失败
        ElMessage.error('糟糕, 注册失败了，原因请查看日志.')
        //2. 输出错误信息
        console.error('注册失败', err)
      })
      
    } else {
      console.error('表单验证失败')
      return false
    }
  })
}

const handleReset = () => {
  console.log('重置表单')
  registerFormRef.value.resetFields()
}
</script>

<style scoped>
/* 全局样式 */
:root {
  --primary-color: #4F46E5;
  --secondary-color: #6366F1;
  --accent-color: #818CF8;
  --neutral-color: #F3F4F6;
  --text-color: #374151;
}

/* 表单元素过渡效果 */
.form-item-transition {
  transition: all 0.3s ease;
}

/* 输入框获得焦点时的动画 */
.el-input:focus-within {
  transform: translateY(-2px);
}

/* 按钮悬停效果 */
button {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

button:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 注册表单容器 */
.register-form {
  max-width: 600px;
  margin: 0 auto;
}

/* 表单元素间距 */
.el-form-item {
  margin-bottom: 1.5rem;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .register-form {
    padding: 0 1rem;
  }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>    